<script setup lang="ts">
import { ArrowRight } from "@element-plus/icons-vue";
import { useGiftStoreHook } from "@/store/modules/gift-list";
import { ref, onMounted } from "vue";
import { type GiftInfo, createGift } from "@/api/gift";
import { useRoute } from "vue-router";
import router from "@/router";
const BREADLIST = [
  { name: "用户中心", path: "#" },
  { name: "礼品兑换", path: "/user/gift" },
  { name: "兑换详情", path: "#" },
];

/** 通过路由-获取礼品ID */
const route = useRoute();
const id = route.params.id;

/** 商品信息 */
let giftInfo = ref<GiftInfo>({
  name: "",
  desc: "",
  photo: "",
  point: 0,
  goodsid: 0,
  inventory: 0,
});

/** 收货信息弹窗 */
const dialogVisible = ref(false);
/** 输入密码弹窗 */
const dialogVisible2 = ref(false);
/** 是否为空状态 */
let isEmpty = ref(true);

/** 收货信息数据 */
const personalInfo = ref({
  recipientsname: "",
  recipientsphone: "",
  recipientsaddr: "",
});

/** 添加收货信息 */
const addPersonalInfo = () => {
  dialogVisible.value = false;
  isEmpty.value = false;
};

/** 兑换信息 */
let exchangeInfo = ref({
  goodsid: Number(id),
  note: "",
  num: 0,
  pwd: "",
});

/** 兑换提示框 */
const showDialog2 = () => {
  if (isEmpty.value) {
    //@ts-ignore
    ElMessage({ type: "warning", message: "请先添加收货信息" });
    return;
  }
  if (exchangeInfo.value.num <= 0) {
    //@ts-ignore
    ElMessage({ type: "warning", message: "请输入兑换数量" });
    return;
  }
  dialogVisible2.value = true;
};

/** 提交兑换 */
const submitExchange = () => {
  dialogVisible2.value = false;
  let data = Object.assign({}, exchangeInfo.value, personalInfo.value);
  createGift(data)
    .then((res) => {
      //@ts-ignore
      if (res.status.code == 200) {
        //@ts-ignore
        ElMessage({ type: "success", message: "兑换成功" });
        router.push("/user/gift");
      }
    })
    .catch((err) => {
      //@ts-ignore
      ElMessage({
        type: "error",
        message: `兑换失败: ${err.response.data.err.msg}`,
      });
    });
};

onMounted(() => {
  let res = useGiftStoreHook().getGiftById(id);
  giftInfo.value = res;
});
</script>

<template>
  <el-breadcrumb :separator-icon="ArrowRight" class="pb-[12px]">
    <el-breadcrumb-item v-for="item in BREADLIST" :to="item.path">{{
      item.name
      }}</el-breadcrumb-item>
  </el-breadcrumb>

  <!-- 收货信息卡片 -->
  <div class="w-full flex pb-[10px]">
    <el-card class="flex-1 resive-card">
      <template #header>
        <div class="flex justify-between items-center">
          <div>收货地址</div>
          <el-button v-show="!isEmpty" size="small" @click="dialogVisible = true">修改信息</el-button>
        </div>
      </template>

      <!-- 空状态 -->
      <div v-if="isEmpty">
        <el-empty :image-size="60">
          <template #description>
            <el-button size="small" type="default" @click="dialogVisible = true">添加收货地址</el-button>
          </template>
        </el-empty>
      </div>

      <!-- 有信息 -->
      <div v-else>
        <table class="min-w-full divide-y divide-gray-200 overflow-x-auto">
          <thead class="bg-gray-50">
            <tr>
              <th scope="col"
                class="px-4 text-nowrap py-3 text-left font-medium text-gray-500 uppercase tracking-wider">
                收件人
              </th>
              <th scope="col"
                class="px-4 text-nowrap py-3 text-left font-medium text-gray-500 uppercase tracking-wider">
                联系电话
              </th>
              <th scope="col" class="px-4 py-3 text-left font-medium text-gray-500 uppercase tracking-wider">
                地址
              </th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200">
            <tr>
              <td class="px-4 py-4 text-nowrap">
                <div>{{ personalInfo.recipientsname }}</div>
              </td>
              <td class="px-4 py-4 text-nowrap">
                <div>{{ personalInfo.recipientsphone }}</div>
              </td>
              <td class="px-4 py-4">
                <div>{{ personalInfo.recipientsaddr }}</div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </el-card>
  </div>

  <!-- 奖品信息表格 -->
  <div class="w-full flex gift">
    <el-card class="flex-1">
      <template #header>
        <div>礼品信息</div>
      </template>

      <div class="bg-white overflow-hidden">
        <div class="flex items-center">
          <img class="h-[120px] w-[120px] sm:h-[150px] sm:w-[150px] object-contain rounded-lg mr-4"
            :src="giftInfo.photo" alt="Product" />
          <div class="h-full flex-1 px-[10px]">
            <div class="flex flex-col md:flex-row md:items-center">
              <div class="text-[16px] font-bold flex-1 py-[4px]">
                {{ giftInfo.name }}
              </div>
              <div class="flex-1 py-[4px]">{{ giftInfo.desc }}</div>
              <div class="text-gray-600 flex-1 py-[4px]">
                {{ giftInfo.point }} 积分
              </div>
            </div>
          </div>
          <div>
            <el-input-number size="small" v-model="exchangeInfo.num" :min="0" :max="10" style="width: 90px" />
          </div>
        </div>
      </div>
    </el-card>
  </div>

  <!-- 提示信息 -->
  <div class="flex flex-col md:flex-row my-[10px]">
    <div
      class="w-full box-border flex-1 rounded-[4px] mx-0 p-2 border-l-[5px] border-solid border-0 border-l-[#409eff] bg-[#409eff19]">
      <div class="text-[16px] font-bold p-2">注意事项</div>
      <div class="px-2 pb-2 text-[14px] leading-[22px] text-[#555]">
        <div>
          1、虚拟商品兑换后不予退回，会在7个工作日内通过电子邮件方式发送兑换码
        </div>
        <div>2、虚拟商品具有一定的时效性，推荐兑换后即刻使用，切勿囤积</div>
      </div>
    </div>
    <div class="flex-1 box-border p-[6px]">
      <div>
        <div class="text-left py-1">备注：</div>
        <el-input class="py-1" v-model="exchangeInfo.note" :rows="1" type="textarea" placeholder="请输入备注信息" />
      </div>
      <div class="flex justify-between py-2 items-center">
        <div class="text-[16px] font-bold">
          消耗积分：<span class="text-[24px]">{{
            exchangeInfo.num * giftInfo.point
            }}</span>
        </div>
        <el-button v-if="!giftInfo.inventory" size="large">库存不足</el-button>
        <el-button v-else size="large" @click="showDialog2">立即兑换</el-button>
      </div>
    </div>
  </div>

  <!-- 设置收货信息弹窗 -->
  <el-dialog v-model="dialogVisible" title="收货信息" width="400">
    <el-form label-width="auto" :model="personalInfo">
      <el-form-item label="姓名">
        <el-input v-model="personalInfo.recipientsname" />
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input v-model="personalInfo.recipientsphone" />
      </el-form-item>
      <el-form-item label="收货地址">
        <el-input v-model="personalInfo.recipientsaddr" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addPersonalInfo"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 输入密码弹窗 -->
  <el-dialog v-model="dialogVisible2" title="收货信息" width="400">
    <p>请提输入密码,以确认您的兑换操作</p>
    <el-form label-width="auto" :model="exchangeInfo">
      <el-form-item label="密码">
        <el-input v-model="exchangeInfo.pwd" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取消</el-button>
        <el-button type="primary" @click="submitExchange">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.resive-card> :deep(.el-card__body) {
  padding: 0;
}
</style>
